<template>
	<view>
		<!-- #ifndef MP -->
		<uni-nav-bar color="#333333" background-color="#FFFFFF" :fixed="false" right-icon="scan" @click-left="showCity"
		 @click-right="scan">
			<block slot="left">
				<view class="city">
					<view>aaa</view>
					<uni-icon type="arrowdown" color="#333333" size="22"></uni-icon>
				</view>
			</block>
			<view class="input-view">
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
				<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入搜索关键词" />
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<view class="content">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="long">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item" :class="item.colorClass">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="mt20">
				<uni-grid :options="navList" :show-border="false" :column-num="4"></uni-grid>
			</view>
			<view class="mt20">

			</view>
		</view>
		<view style="height: 1000upx;"></view>
	</view>

</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniSwiperDot,
			uniGrid,
			uniNavBar,
			uniIcon
		},
		data() {
			return {
				info: [{
					colorClass: 'uni-bg-red',
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
					content: '内容 A'
				}, {
					colorClass: 'uni-bg-green',
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
					content: '内容 B'
				}, {
					colorClass: 'uni-bg-blue',
					url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
					content: '内容 C'
				}],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,

				navList: [{
						image: '/static/c1.png',
						text: 'Grid1'
					},
					{
						image: '/static/c2.png',
						text: 'Grid2'
					},
					{
						image: '/static/c3.png',
						text: 'Grid3'
					},
					{
						image: '/static/c4.png',
						text: 'Grid4'
					},
					{
						image: '/static/c5.png',
						text: 'Grid5'
					},
					{
						image: '/static/c6.png',
						text: 'Grid6'
					},
					{
						image: '/static/c7.png',
						text: 'Grid7'
					},
					{
						image: '/static/c8.png',
						text: 'Grid8'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			// #ifndef MP
			showCity() {
				uni.showToast({
					title: '选择城市'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			},
			scan() {
				uni.showToast({
					title: '扫码'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			clickLeft() {
				uni.showToast({
					title: '左侧按钮'
				})
			}
			// #endif
		}
	}
</script>

<style>
	.page {
		height: 4000px;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	.swiper-box {
		height: 400upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.uni-bg-red {
		background: #ff5a5f;
	}

	.uni-bg-green {
		background: #09BB07;
	}

	.uni-bg-blue {
		background: #007AFF;
	}

	.uni-swiper__box {
		margin-top: 30upx;
	}

	.uni-swiper__header {
		padding: 0 30upx;
		font-size: 32upx;
		color: #333;
	}

	.uni-swiper__info {
		display: flex;
		padding: 0 15upx;
	}

	.uni-swiper__info-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15upx;
		height: 60upx;
		width: 100%;
		font-size: 28upx;
		color: #333;
		border: 1px #eee solid;
		border-radius: 10upx;
	}

	.uni-swiper__info-dots {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #333333;
		margin-left: 10upx;
		box-sizing: border-box;
	}

	.uni-swiper__info-dots:first-child {
		margin: 0;
	}

	.active {
		border: 1px #000 solid;
	}

	slider {
		width: 100%;
	}

	.mt20 {
		margin-top: 20upx;
	}

	.city {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-left: 8px;
		white-space: nowrap;
	}

	.input-view {
		width: 92%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}

	.input-view .uni-icon {
		line-height: 30px !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
</style>
